<template>
  <div class="activityList">
    <div style="padding: 20px 50px; text-align: center">
      <el-button
        v-if="leaderArr.length > 0"
        type="primary"
        style="width: 120px; padding: 10px"
        @click="activityAdd()"
      >新建活动</el-button>
    </div>
    <div class="list">
      <div class="box">
        <div class="column" v-for="count in 4">
          <div class="grid" v-for="(info, index) in columnList[count - 1]" :key="index">
            <img class="activitySubjectImage" :src="info.activity_subject_image" alt />
            <p class="activityName">{{ info.activity_name }}</p>
            <p class="row" style="font-size: 12px; justify-content: center; padding: 5px 5px">
              <svg
                t="1616548931691"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5082"
                width="10"
                height="10"
              >
                <path
                  d="M242.861124 120.292034l0 569.88162c0 0 114.299305-138.116957 290.482253-65.081675 68.267515 39.718871 133.352187 93.696274 238.120954 93.696274 104.737788 0 177.799052-65.119649 177.799052-65.119649L949.263383 106.007119c0 0-155.558132 160.321502-353.202729 23.821449-51.57883-38.115957-138.896028-72.975323-211.896334-53.9822C311.133236 94.934227 242.861124 120.292034 242.861124 120.292034L242.861124 120.292034zM117.012849 954.067934c-26.15067 0-47.31572-21.195429-47.31572-47.325713L69.697129 114.076648c0-26.116693 21.16505-47.31572 47.31572-47.31572 26.161263 0 47.325713 21.199027 47.325713 47.31572L164.338562 906.742221C164.338562 932.872504 143.168516 954.067934 117.012849 954.067934L117.012849 954.067934z"
                  p-id="5083"
                  fill="#1296db"
                />
              </svg>
              {{ info.club_name }}
            </p>
            <p
              class="row activityAddress"
              style="padding-top: 5px"
              v-html="getContent(info.activity_content)"
            ></p>
            <p class="row activityAddress">{{ info.activity_address }}</p>
            <p class="row">
              <span class="createUserName">{{ info.create_user_name }}</span>
              <span class="startTime">{{ info.startTime }}</span>
            </p>
            <div class="btn">
              <div
                class="left"
                @click="
                  clickJoinActivity(info.id, info.club_id, info.club_name)
                "
              >
                <svg
                  t="1616478655790"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3486"
                  width="25"
                  height="25"
                >
                  <path
                    d="M798.743 61.975c3.296-3.296 9.888-6.592 13.184-6.592 13.184 0 19.776 9.888 19.776 19.776v75.805h75.805c9.888 0 19.776 9.888 19.776 19.776s-9.888 19.776-19.776 19.776h-75.805v72.51c0 13.184-6.592 19.776-19.776 19.776-9.888 0-16.479-6.592-16.479-19.776v-72.51h-75.805c-9.888 0-19.776-9.888-19.776-19.776 0-6.592 3.296-9.888 6.592-13.184 3.296-3.296 6.592-6.592 13.184-6.592h75.805v-75.805c0-3.296 0-9.888 3.296-13.184zM933.875 470.667c0-69.214-16.479-135.132-46.143-194.458-13.184-26.367-46.143-6.592-32.959 16.479 26.367 52.734 42.847 115.357 42.847 177.979 0 92.286-32.959 177.979-88.989 243.896-13.184-65.918-39.551-118.653-95.581-145.020 9.888-19.776 16.479-39.551 16.479-65.918v-194.458c0-16.479-3.296-32.959-9.888-46.143-9.888-9.888-16.479-19.776-19.776-32.959-23.071-26.367-59.326-39.551-92.286-42.847-16.479 0-26.367 13.184-26.367 23.071 3.296 9.888 13.184 16.479 19.776 16.479 46.143 6.592 88.989 32.959 88.989 79.102v197.754c0 23.071-6.592 46.143-26.367 56.031-16.479 13.184-13.184 29.663 3.296 32.959 9.888 3.296 19.776 6.592 29.663 9.888 52.734 23.071 72.51 79.102 82.398 148.315-32.959 29.663-72.51 56.031-112.060 72.51-6.592-105.469-23.071-204.346-108.765-247.193 9.888-19.776 16.479-39.551 16.479-62.622v-217.529c0-158.203-276.856-158.203-276.856 0v217.529c0 23.071 6.592 42.847 16.479 62.622-56.031 26.367-82.398 79.102-98.877 141.724-52.734-69.214-85.693-154.907-85.693-247.193 0-210.938 171.387-382.325 382.325-382.325 69.214 0 131.836 16.479 184.57 46.143 9.888 6.592 19.776 3.296 26.367-3.296 6.592-9.888 6.592-23.071-9.888-32.959-59.326-29.663-128.54-49.438-201.050-49.438-234.008 0-421.875 187.867-421.875 421.875 0 234.008 187.867 421.875 421.875 421.875 234.008 0 421.875-187.867 421.875-421.875zM627.357 836.512c-36.255 13.184-75.805 19.776-115.357 19.776-102.172 0-194.458-39.551-263.672-105.469 9.888-69.214 32.959-125.244 88.989-145.020 39.551 36.255 158.203 36.255 194.458 0 79.102 29.663 92.286 128.54 95.581 230.713zM334.021 513.514v-217.529c0-105.469 204.346-105.469 204.346 0v217.529c0 105.469-204.346 105.469-204.346 0z"
                    p-id="3487"
                    fill="#1296db"
                  />
                </svg>
              </div>
              <div class="right" @click="clickZan()">
                <svg
                  t="1616478243786"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2092"
                  width="25"
                  height="25"
                >
                  <path
                    d="M829.2 380.8c-4.5 0-9.1 0.3-13.8 0.9l-134.3 16.8c-12.7 1.6-23.9 8.8-30.7 19.6-1 1.6-2 3.1-3 4.7-10.9 14.6-20.5 27.6-29.5 40-4.2 5.8-10.8 8.9-17.5 8.9-4.4 0-8.8-1.3-12.6-4.1-9.6-7-11.8-20.4-4.8-30.1 8-11 25.1-36.1 25.6-36.9 14.3-21.2 37.9-64.2 37.7-121.5V275c-2.2-94.5-83.5-168.2-178-168.2h-55.9c-29.5 0-50 29.1-40.2 56.9 10.8 30.3 19.2 69.7 15.7 115.4-4.1 53.9-23.1 95.2-37.4 119.8-3.8 6.5-5.7 13.8-5.7 21.2v422.5c0 22.3 17.2 40.8 39.4 42.5l415 31.9c2.8 0.2 5.5 0.3 8.2 0.3 54.8 0 101.2-42.2 105.5-97.8L937.6 498c4.8-64-46.1-117.2-108.4-117.2z"
                    fill="#1296db"
                    p-id="2093"
                  />
                  <path
                    d="M256.8 410.4h-128c-23.6 0-42.7 19.1-42.7 42.7v384c0 23.6 19.1 42.7 42.7 42.7h128c23.6 0 42.7-19.1 42.7-42.7v-384c0-23.6-19.1-42.7-42.7-42.7z"
                    fill="#1296db"
                    p-id="2094"
                  />
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getActivityList, joinActivity, getClubinfoByUser } from '@/api/api'
import { login } from '@/api/user'
export default {
  data() {
    return {
      activityList: [],
      columnList: [],
      leaderArr: [],
    }
  },
  mounted() {
    this.getActivityPage()
    this.getIsAdd()
  },
  computed: {
    // getActivityList() {
    //   let count = this.activityList.length % 3;
    //   let arr = [];
    //   for (let i = 0; i <= count - 1; i++) {
    //     arr.push(null);
    //   }
    //   return [...this.activityList, ...arr];
    // },
  },
  methods: {
    getContent(str) {
      return str.allReplace('\n', '</br>')
      // if(str.indexOf("\n")>=0){
      //   return str.allReplace("\n","</br>")
      // }
      // else{
      //   return str;
      // }
    },
    getIsAdd() {
      getClubinfoByUser().then((res) => {
        this.leaderArr = res
      })
    },
    clickJoinActivity(activityId, clubId, clubName) {
      joinActivity({ activityId, clubId, clubName }).then((res) => {
        if (res.code === 0) {
          this.$message.success(res.msg)
        } else {
          this.$message.info(res.msg)
        }
      })
    },
    clickZan() {
      this.$message.success('点赞功能正在开发，点赞心意收到了。')
    },
    getActivityPage() {
      getActivityList().then((res) => {
        this.activityList = res
        let arr1 = []
        let arr2 = []
        let arr3 = []
        let arr4 = []
        this.activityList.forEach((item, index) => {
          if (index % 4 == 0) {
            arr1.push(item)
          }
          if (index % 4 == 1) {
            arr2.push(item)
          }
          if (index % 4 == 2) {
            arr3.push(item)
          }
          if (index % 4 == 3) {
            arr4.push(item)
          }
        })
        this.columnList.push(arr1)
        this.columnList.push(arr2)
        this.columnList.push(arr3)
        this.columnList.push(arr4)
      })
    },
    gotoInfo() {
      this.$router.push('/club/activityInfo')
    },
    activityAdd() {
      this.$router.push('/club/activityAdd')
    },
  },
}
</script>
<style lang="stylus" scoped>
.activityList {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url('../../assets/login_bg.svg');
  overflow: auto;

  * {
    padding: 0;
    margin: 0;
  }

  .bolder {
    font-weight: bolder;
    margin-right: 15px;
  }

  .activityAddress {
    svg {
      position: relative;
      top: -2px;
      left: -5px;
      width: 15px;
      height: 15px;
    }
  }

  .list {
    // padding: 20px 10px;
    display: flex;
    justify-content: center;
    width: 100%;
    height: calc(100% - 96px);
    overflow: auto;

    .box {
      width: 80%;
      min-width: 960px;
      // height: 1200px;
      // background-color: rgba(0, 0, 0, 0.6);
      display: flex;

      .column {
        flex: 1;
        // border: 1px solid red;
        margin: 10px;

        .grid {
          width: 100%;
          // min-width: 230px;
          background-color: rgba(255, 255, 255, 0.6);
          margin-bottom: 10px;
          border-radius: 5px;
          box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

          .activitySubjectImage {
            width: 100%;
            border-radius: 5px 5px 0 0;
          }

          .activitySubjectImage:hover {
            opacity: 0.8;
          }

          .activityName {
            padding: 10px 10px 0;
            font-size: 20px;
            font-weight: bolder;
            text-align: center;
          }

          .activityName:hover {
            cursor: pointer;
            text-decoration: underline;
          }

          .btn {
            text-align: center;
            font-weight: bold;
            font-size: 17px;
            display: flex;
            padding-top: 20px;

            >div {
              flex: 1;
              text-align: center;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: rgba(0, 0, 0, 0.8);
              padding: 15px 0;
              cursor: pointer;
            }

            >div:hover {
              background-color: rgba(0, 0, 0, 0.5);
            }

            .left {
              border-radius: 0 0 0 5px;
              position: relative;
            }

            .left:after {
              content: '';
              width: 1px;
              height: 50%;
              background-color: #409eff;
              position: absolute;
              right: 0px;
            }

            .right {
              border-radius: 0 0 5px 0;

              .icon {
              }
            }
          }

          .row {
            font-size: 15px;
            display: flex;
            padding: 20px 10px 0;

            .createUserName {
              flex-basis: 50px;
              white-space: nowrap;
            }

            .startTime {
              flex: 1;
              text-align: right;
            }
          }
        }
      }
    }
  }
}
</style>
